:root {
    --kui-form-label-width:120px;
    --kui-bgcolor:#ffffff;
    --kui-color:#596172;
    --kui-color-border:#f0f0f0;
    --kui-color-hover:#cce4fa;
}
:root[data-theme=dark] {
    --kui-bgcolor:#141414;
    --kui-color:#d8d8d8;
    --kui-color-border:rgba(253, 253, 253, 0.12);
    --kui-color-hover:#cce4fa;
}

/*Common*/
.kui-link {color:#1890ff;cursor:pointer;}
.kui-frame {border:none;width:100%;min-height:550px;}
.kui-tips {color:#1890ff;margin-left:10px;}
.kui-right {text-align:right;}
.kui-center {text-align:center;}
.kui-flex {display:flex;}
.kui-flex-row {display:flex;flex-direction:row;align-items:center;gap:10px;}
.kui-flex-column {display:flex;flex-direction:column;align-items:center;gap:10px;}
.kui-flex-space {display:flex;justify-content:space-between;align-items:center;gap:10px;}
.kui-error {text-align:center;padding:20px;height:100%;}
.kui-primary {color:#1890ff;}
.kui-danger {color:#ed4014;}
.kui-bg-danger, .kui-bg-danger > td {background-color:#ffccc7 !important;}
.kui-bg-danger:hover, .kui-bg-danger:hover > td {background-color: #ffa39e !important;}
.kui-p10 {padding:10px;}
.kui-app-name {
    font-weight:bold;text-align:center;margin-top:18px;margin-bottom:18px;line-height:22px;font-size:20px;
    -webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));
}
.kui-body > .kui-card {height:100%;}
.kui-body > .kui-card > .ant-tabs > .ant-tabs-content-holder {
    position:absolute;top:56px;left:10px;right:10px;bottom:10px;overflow:auto;
}
pre.error {padding:10px;border-left:5px solid #ffccc7;background:#fff2f0;border-radius:3px;max-height:300px;overflow:auto;}
.kui-icon {display:flex;align-items:center;gap:3px;cursor:pointer;}
.kui-run-mode {position:absolute;bottom:5px;left:5px;width:auto;font-weight:bold;border-radius:5px;padding:0 7px;font-size:12px;}

/*Grid*/
.kui-row {display:grid;grid-template-columns:repeat(auto-fit,minmax(0%,1fr));gap:10px;height:100%;}
.kui-row-19, .kui-row-28, .kui-row-37, .kui-row-46, .kui-row-55, .kui-row-64, .kui-row-73, .kui-row-82, .kui-row-91 {
    display:grid;gap:10px;padding-right:10px;height:100%;
}
.kui-row-19 {grid-template-columns:10% 90%;}
.kui-row-28 {grid-template-columns:20% 80%;}
.kui-row-37 {grid-template-columns:30% 70%;}
.kui-row-46 {grid-template-columns:40% 60%;}
.kui-row-55 {grid-template-columns:50% 50%;}
.kui-row-64 {grid-template-columns:60% 40%;}
.kui-row-73 {grid-template-columns:70% 30%;}
.kui-row-82 {grid-template-columns:80% 20%;}
.kui-row-91 {grid-template-columns:90% 10%;}

/*Query*/
.kui-query {margin-bottom:10px;padding:10px;}
.kui-query-btn {display:flex;gap:3px;}
.kui-query-more .ant-row {gap:8px 0;}
.kui-query .ant-form-item {margin:0;}
.kui-query .ant-form-item-control {margin-right:10px;}
.kui-query .ant-picker-range input {width:98px;}
.kui-query-more .ant-picker-range input {width:100%;}
.kui-advanced-search {padding:10px;}
.kui-advanced-search .item {display:grid;grid-template-columns:140px 140px auto 70px;margin-top:10px;grid-column-gap:5px;}

/*Toolbar*/
.kui-title {font-size:16px;font-weight:bold;}
.kui-sub-title {font-size:14px;margin-left:10px;font-weight:normal;}
.kui-toolbar {display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;}
.kui-toolbar > div {display:flex;align-items:center;}
.kui-toolbar {margin-bottom:5px;padding:5px 10px;border-bottom:1px solid var(--kui-color-border);}

/*Table*/
.kui-table.form-list .kui-toolbar {border-bottom:none;}
.kui-table .kui-title {padding-left:0;}
.kui-striped table tr:nth-child(odd) td {background-color:#fdfdfd;}
.kui-table-filter {display:flex;justify-items:center;gap:10px;padding:10px;}
.kui-table-filter label {display:flex;}
.kui-table-filter input {width:100px;}
.kui-column-setting {margin-left:5px;cursor:pointer;font-size:18px;}

/*Form*/
.kui-caption {font-weight:bold;font-size:16px;margin:5px;padding:2px 10px;border-left:5px solid #1890ff;}
.kui-form, .kui-small {padding:10px 10px 0 0;}
.kui-steps-content {
    margin-top:16px;padding:10px;background-color:var(--kui-bgcolor);
    border:1px dashed var(--kui-color-border);
    border-radius:6px;min-height:200px;
}
.kui-form-content {padding:10px;}
.kui-form-action {display:flex;justify-content:space-between;align-items:center;}
.kui-form-action button {margin-left:8px;}
.kui-form-page {padding:24px 50px 20px 0;}
.kui-form-page-button {margin-left:120px;}
.kui-form-page-button button {margin-right:10px;}
.kui-form-button {margin-left:200px;}
.kui-form-button button {margin-right:10px;}
.kui-form-auth {width:400px;margin:0 auto;}
.kui-form-unit {display:flex;gap:10px;align-items:center;}
.kui-form-list {padding-bottom:10px;}
.kui-form-list > div {padding:0 10px 10px 10px;}
.kui-unit {display:inline-block;margin-left:10px;}

/*Capsule*/
.kui-capsule {display:flex;border-radius:5px;background-color:#5d5d5d;color:#fff;font-size:12px;height:20px;}
.kui-capsule span {display:inline-block;padding:0 5px;height:20px;line-height:20px;}
.kui-capsule-value {border-radius:0 5px 5px 0;}
.kui-row .kui-capsule {float:left;}

/*FullScreen*/
.kui-screen {position:relative;background-color:var(--kui-bgcolor);}
.kui-screen.is-full {position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;}
.kui-screen .action {position:absolute;top:0;right:0;z-index:1002;}

/*GroupBox*/
.kui-group-box {position:relative;border:1px dashed var(--kui-color-border);border-radius:6px;}
.kui-group-box .legend {position:absolute;top:-13px;left:20px;padding:0 10px;font-weight:bold;}
.kui-group-box .body {padding:10px;}

/*ListBox*/
.kui-list-box {position:relative;height:100%;}
.kui-list-box-search {margin:10px;}
.kui-list-box-body {position:absolute;left:0;right:0;top:0;bottom:0;padding:10px;overflow:auto;}
.kui-list-box-body li {position:relative;padding:5px 10px;cursor:pointer;border-left:3px solid transparent;}
.kui-list-box-body li:hover {background-color:var(--kui-color-hover);}
.kui-list-box-body li.active {background-color:#bae7ff;color:#1890ff;border-left-color:#1890ff;}

/*EditInput*/
.kui-edit-input {display:flex;align-items:center;}
.kui-edit-input input {width:190px;}
.kui-edit-input span {margin-left:10px;display:flex;align-items:center;}

/*Pick*/
.kui-picker {position:relative;}
.kui-pick, .kui-pick-clear {
    position:absolute;top:0;right:0;cursor:pointer;text-align:center;
    display:block;width:32px;height:32px;line-height:32px;
}
.kui-pick-clear {right:28px;}
.kui-pick-icon {position:absolute;top:5px;left:5px;z-index:101;}
.kui-pick-icon + input {padding-left:20px;}
.kui-icon-picker {position:relative;height:300px;margin:10px;}
.kui-icon-picker .search {position:absolute;top:0;left:0;right:0;}
.kui-icon-picker .items {position:absolute;top:35px;left:0;bottom:0;right:0;overflow:auto;}
.kui-icon-picker .item {display:inline-block;font-size:32px;width:80px;text-align:center;margin:2px;}
.kui-icon-picker .item.active {font-weight:bold;color:#1890ff;}
.kui-icon-picker .item .name {display:block;font-size:14px;height:14px;line-height:14px;overflow:hidden;}

:root[data-theme=dark] .kui-toolbar {border-bottom:1px solid #303030;}
:root[data-theme=dark] .kui-list-box li:hover, 
:root[data-theme=dark] .kui-list-box li.active {background-color:rgba(255, 255, 255, 0.08);}
:root[data-theme=dark] .kui-striped table tr:nth-child(odd) td {background-color:#1a1a1a;}
:root[data-theme=dark] .kui-striped table tr:nth-child(even) td {background-color:var(--kui-bgcolor);}

/*File*/
.kui-upload {display:flex;justify-content:space-between;align-items:center;}
.kui-upload input {width:100%;}
.kui-upload .template {width:60px;text-align:right;}
.kui-upload .kui-button, .kui-upload-button {
    border:1px solid var(--kui-color-border);border-radius:3px;padding:0 10px;margin-right:10px;
    height:30px;line-height:30px;position:relative;
}
.kui-upload .kui-button input, 
.kui-upload.ant-upload-drag input, 
.kui-upload-button input {
    position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;outline:0;
}
.kui-upload-button {display:inline;padding:5px 10px;}
.kui-upload .ant-form-item-control-input-content {display:flex;align-items:center;}
.kui-form-files {margin-top:5px;}
.kui-form-files > div {display:flex;align-items:center;}
.kui-form-files > div > span {margin-right:5px;width:50px;}
.kui-form-files > div > a {overflow:hidden;}

.kui-file-view {min-height:300px;}
.kui-file-view > .items, .kui-file-view > .view {position:absolute;top:10px;bottom:10px;}
.kui-file-view > .items {left:10px;width:100px;overflow:auto;display:flex;flex-direction:column;gap:10px;}
.kui-file-view > .items .active {font-weight:bold;}
.kui-file-view > .view {left:120px;right:10px;overflow:hidden;}
.kui-file-view > .view img {width:100%;height:100%;}

/*Setting*/
.kui-nav-setting, .kui-table-setting {max-height:500px;overflow:auto;}
.kui-nav-setting .title, .kui-table-setting .title {font-weight:bold;margin:0 0 10px 50px;}
.kui-table-setting .title {display:flex;justify-content:space-between;align-items:center;}
.kui-table-setting .title > .ant-btn-link {padding:4px;}
.kui-table-setting > .title {margin-left:20px;}
.kui-table-setting .ant-btn-link {font-weight:bold;}
.kui-table-setting .anticon {cursor:pointer;font-size:16px;}
.kui-table-setting .item {display:flex;align-items:center;margin-bottom:5px;}
.kui-table-setting .item > .anticon-pause {width:50px;cursor:move;}
.kui-table-setting .item > .ant-checkbox-wrapper {width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kui-table-setting .fixed .item > .ant-checkbox-wrapper {margin-left:50px;}
.kui-table-setting .item > .ant-input-number {width:70px;}
.kui-table-setting .item > .fixed {margin-left:10px;visibility:hidden;}
.kui-table-setting .item:hover > .fixed {visibility:visible;}

.kui-nav-setting .item {display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.kui-nav-setting .item > .span {cursor:move;padding-right:10px;}
.kui-nav-setting .item > .span > .anticon {width:30px;}
.kui-nav-setting .item > .anticon-delete {width:30px;color:#ed4014;cursor:pointer;}
.kui-nav-setting .item > .anticon-close {width:30px;cursor:pointer;}
.kui-nav-setting > .anticon-plus {display:block;text-align:center;cursor:pointer;margin-top:10px;padding:5px;border:1px dashed #ccc;}

/*Style*/
.kui-setting-form {padding:10px;}
.kui-setting-form h4 {font-size:14px;margin-bottom:20px;}
.kui-setting-form .ant-form-item-label {text-align:left;}
.kui-setting-form .ant-divider-horizontal {margin-top:0;}
.kui-theme-color {display:flex;gap:10px;margin-bottom:20px;}
.kui-theme-color .item {width:20px;height:20px;border-radius:3px;cursor:pointer;color:#fff;text-align:center;}

/*Logo*/
.kui-header, .kui-layout .kui-logo {border-bottom:1px solid var(--kui-color-border);}
.kui-menu-dark {background:#001529;color:rgba(255,255,255,0.65);border-bottom:none;}
.kui-menu-dark .kui-logo, .kui-header .kui-logo {border-bottom:none;}

/*Import*/
.kui-import {display:grid;grid-template-rows:20px 50px auto;padding:10px;}
.kui-import .item {display:flex;margin:8px 0;align-items:center;}
.kui-import .item input {display:inline-block;border:1px solid var(--kui-color-border);}
.kui-import .item .async {margin-left:10px;}
.kui-import .kui-link {margin-right:10px;}
.kui-import .size {margin-left:10px;}
.kui-import-message {padding:10px 0;}

/*Code*/
.kui-code {position:relative;margin:10px 0 0 0;border-left:3px solid var(--kui-color-border);}
.kui-code .action {position:absolute;top:0;right:10px;font-size:16px;cursor:pointer;}
.kui-code pre[class*=language-] {margin:0;padding:10px;overflow:auto;max-height:360px;}
:root[data-theme=dark] :not(pre)>code[class*=language-], pre[class*=language-] {background-color:rgba(255,255,255,0.08);}

/*WebApi*/
.kui-api-row {margin-bottom:10px;}
.kui-api-row li {display:flex;align-items:center;margin-bottom:5px;}
.kui-api-label {display:flex;}
.kui-api-label span {display:inline-block;}
.kui-api-label label {display:inline-block;width:100px;}
.kui-api-name {font-size:16px;font-weight:bold;margin-bottom:10px;}
.kui-api-title {font-weight:bold;margin-bottom:5px;}
.kui-api-route {display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.kui-api-result {border-left:5px solid #1890ff;padding:10px;background-color:#f1f1f1;border-radius:3px;max-height:200px;overflow:auto;}
:root[data-theme=dark] .kui-api-result {background-color:rgba(255,255,255,0.08);}

@media screen and (max-width:1264px) {
    .kui-query .ant-form-item {margin:0 0 5px 0;}
}
@media screen and (max-width:768px) {
    .kui-toolbar {flex-direction:column;align-items:unset;}
    .kui-toolbar > div {flex-direction:column;align-items:start;}
    .kui-toolbar > .left {flex-direction:row;justify-content:space-between;align-items:center;}
    .kui-logo {margin-left:6px;}
    .kui-app-name {display:none;}
    .kui-header {padding:0;}
    .kui-nav {justify-content:flex-end;gap:8px;margin:5px 0 0 0;padding:5px;}
    .kui-form-page {padding:10px 10px 20px 10px;}
    .kui-row-19, .kui-row-28, .kui-row-37, .kui-row-46, .kui-row-56, .kui-row-64, .kui-row-73, .kui-row-82, .kui-row-91 {
        grid-template-columns:100%;grid-row-gap:10px;padding-right:0;
    }
    .kui-card {min-height:200px;overflow:auto;}
    .kui-table > .kui-toolbar {height:auto;}
    .kui-query {padding:10px;}
    .kui-query-btn {margin-top:5px;}
    .kui-table .kui-title {padding:5px 0;}
    .kui-form, .kui-small {padding-left:10px;}
    .kui-form-page-button {margin-left:10px;}
}
@media screen and (max-width:574px) {
    .kui-form-page-button {margin-left:10px;}
}